<template>
  <div class="home-selected-item-v3 home-selected-item-common">
    <div class="inner">
      <img :src="selectedItem.image.url" alt="">
      <div class="info-frame">
        <div class="location">
          <img src="@/assets/img/home/location.png" alt="">
          <span>{{ selectedItem.location }}</span>
        </div>
        <div class="houseName houseNameCommon">{{ selectedItem.houseName }}</div>
        <div class="summary">{{ selectedItem.summaryText }}</div>
        <div class="price-frame">
          <div class="finalPrice">¥ {{ selectedItem.finalPrice }}</div>
          <div class="productPrice">¥ {{ selectedItem.productPrice }}</div>
          <div class="discount">{{ selectedItem.priceTipBadge?.text }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
const { selectedItem } = defineProps({
  selectedItem: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="less" scoped>
.home-selected-item-v3 {
  background-color: #fff;

  .inner {

    .info-frame {
      padding: 2.13333vw 2.66667vw;

      .houseName {
        margin: 1.33333vw 0;
        font-size: 3.73333vw;
        color: #333;

      }

      .location {
        line-height: 3.2vw;

        img {
          width: 3.2vw;
          height: 3.2vw;

        }

        span {
          color: #666;
          font-size: 3.2vw;
        }
      }

      .summary {
        color: #666;
        font-size: 3.2vw;
      }

      .price-frame {
        display: flex;
        align-items: flex-start;
        margin: 2.13333vw 0;

        .finalPrice {
          color: #ff9645;
          font-size: 3.73333vw;
        }

        .productPrice {
          color: #999;
          font-size: 3.2vw;
          text-decoration: line-through;
        }

        .discount {
          background-image: linear-gradient(270deg, #f66, #ff9f9f);
          color: #fff;
          padding: 0 1.6vw;
          border-radius: 2.13333vw;
          font-size: 3.2vw;

        }
      }
    }

  }
}
</style>